<template>
  <div class="PersonnelTree">
    <el-dialog title="人员选择" :visible.sync="dialogPersonnel" :before-close="close">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.name" :name="item.id">
          <div class="custom-tree-container">
            <div class="block">
              <el-input
                size="small"
                placeholder="输入姓名进行过滤"
                v-model="filterText">
              </el-input>
              <el-tree
                show-checkbox
                node-key="id"
                default-expand-all
                :data="item.data"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :ref="item.id"
                @check-change="change"
              >
              </el-tree>
            </div>
            <div class="block">
              <h3 class="mt-5">选择的人员：</h3>
              <el-tag
                class="tag"
                v-for="tag in checked"
                :key="tag.id"
                @close="closeTag(tag)"
                closable>
                {{tag.label}}
              </el-tag>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="enter(checked)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PersonnelTree',
  props: {
    dialogPersonnel: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      activeName: '', // 当前所在的tab的id
      filterText: '', // 筛选文字
      tabList: [], // 树形结构数据
      defaultProps: { // 默认数据格式
        children: 'children',
        label: 'label'
      },
      checked: [] // 选择的人员
    }
  },
  watch: {
    // 监听筛选
    filterText (val) {
      let tree = this.activeName;
      this.$refs[tree][0].filter(val);
    },
    activeName (newVal, oldVal) {
      if (oldVal) {
        this.filterText = '';
        this.$refs[oldVal][0].filter('');
      }
    }
  },
  methods: {
    // 筛选数据方法
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /**
     * 当前选中节点变化时触发的事件
     * @param {object} data 传递给 data 属性的数组中该节点所对应的对象
     * @param active 树目前的选中状态
     */
    change (data, active) {
      if (active === true && !data.children) {
        this.checked.push(data);
      } else {
        let index = this.checked.indexOf(data);
        if (index > -1) {
          this.checked.splice(index, 1);
        }
      }
    },
    // 获取人员数据
    getTree () {
      let data = {
        orgId: this.$storage.get('orgId')
      };
      this.$api.getTree(data).then(res => {
        this.tabList = res;
        this.activeName = this.tabList[0].id;
      })
    },
    // 关闭dialog
    close () {
      this.$emit('close')
    },
    // dialog的确定方法
    enter (checked) {
      this.$emit('enter', checked)
    },
    /**
     * 点击tag的删除按钮方法
     * @param {Object}tag 此tag的data数据
     */
    closeTag (tag) {
      let index = this.checked.indexOf(tag);
      if (index > -1) {
        this.checked.splice(index, 1);
        let tree = this.activeName;
        this.$refs[tree][0].setChecked(tag, false)
      }
    }
  },
  created () {
    this.getTree()
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
  .custom-tree-container {
    display: flex;
    justify-content: space-around;

    .block {
      width: 48%;

      .tag {
        margin: 10px;
      }
    }
  }
</style>
